import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import DrillScope from './DrillScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
const traceCols = [{
  title:'IP',
  key:'ip',
  sortable:true,
  render:function(fmtVal,rowData){
    return (
      <a href={BlueWare.pageUrlPrefix+'/app/'+BlueWare.appId+'/socket'+'#/trace/'+rowData.uuid}>{fmtVal}</a>
    )
  }
},{
  title:'端口号',
  key:'port',
  sortable:true
},{
  title:'开始时间',
  key:'openStamp',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'耗时（ms）',
  key:'timeUsage',
  sortable:true,
  formatter:format.integer
},{
  title:'异常',
  key:'reason',
  sortable:true
}]
export default class RootView extends View {
  render(){
    return (
      <div className="box">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            <h4>{this.state.title}</h4>
          </div>
          <div className="widget-content">
            <div className="box">
              <Card title="Read 耗时趋势 Top 5" extra={
                  addWidgetMixin(this.scope.chart0Api,'Read 耗时趋势 Top 5')
                }>
                <ChartWidget store={this.state.chart0}/>
              </Card>
            </div>
            <div className="box">
              <Card title="Write 耗时趋势 Top 5" extra={
                  addWidgetMixin(this.scope.chart1Api,'Write 耗时趋势 Top 5')
                }>
                <ChartWidget store={this.state.chart1}/>
              </Card>
            </div>
            <div className="box">
              <Card title="慢请求Trace">
                <GridWidget store={this.state.grid} cols={traceCols}/>
              </Card>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:DrillScope
}
